<keira-sai-top-bar [handler]="getHandler()" />

<div class="container-fluid">
  @if (editorService.loading) {
    <span [translate]="'LOADING'"></span>
  }

  @if (editorService.form && !!editorService.loadedEntityId && !editorService.loading) {
    <div class="content-block">
      <keira-query-output [docUrl]="docUrl" [editorService]="editorService" (executeQuery)="save($event)" />
    </div>
    <div class="content-block">
      <form [formGroup]="editorService.form" class="edit-form mb-2">
        <div class="row">
          <div class="col-sm-6 col-lg-3 sai-category">
            <p class="sai-category-title" style="margin-bottom: 38px">General</p>
            <div class="form-row" [hidden]="isTimedActionlists">
              <div class="form-group col-3">
                <label class="control-label" for="event_type">Event</label>
              </div>
              <div class="form-group col">
                <select [formControlName]="'event_type'" id="event_type" class="form-control form-control-sm">
                  @for (key of SAI_EVENTS_KEYS; track key) {
                    <option [ngValue]="key" [label]="key + ' - ' + SAI_EVENTS[key]"></option>
                  }
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-3">
                <label class="control-label" for="action_type">Action</label>
              </div>
              <div class="form-group col">
                <select [formControlName]="'action_type'" id="action_type" class="form-control form-control-sm">
                  @for (key of SAI_ACTIONS_KEYS; track key) {
                    <option [ngValue]="key" [label]="key + ' - ' + SAI_ACTIONS[key]"></option>
                  }
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-3">
                <label class="control-label" for="target_type">Target</label>
              </div>
              <div class="form-group col">
                <select [formControlName]="'target_type'" id="target_type" class="form-control form-control-sm">
                  @for (key of SAI_TARGETS_KEYS; track key) {
                    <option [ngValue]="key" [label]="key + ' - ' + SAI_TARGETS[key]"></option>
                  }
                </select>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-6">
                <label class="control-label" for="id">id</label>
                <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SMARTAI.EDITOR.UNIQUE_ID' | translate"></i>
              </div>
              <div class="form-group col">
                <input [formControlName]="'id'" id="id" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-6">
                <label class="control-label" for="link">link</label>
                <i
                  class="fas fa-info-circle ms-1"
                  placement="auto"
                  [tooltip]="
                    'Event linking. Example: if id = 0 and link = 1; id 1 will only be able to occur if id = 0 was triggered (id 1 has to use event_type SMART_EVENT_LINK)'
                  "
                ></i>
              </div>
              <div class="form-group col">
                <input [formControlName]="'link'" id="link" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-6">
                <label class="control-label" for="event_phase_mask">phase</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls.event_phase_mask"
                  [disabled]="editorService.form.controls.event_phase_mask.disabled"
                  [config]="{ flags: EVENT_PHASE_MASK, name: 'event_phase_mask' }"
                  [modalClass]="'modal-lg'"
                />
                <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SMARTAI.EDITOR.PHASE' | translate"></i>
              </div>
              <div class="form-group col">
                <input [formControlName]="'event_phase_mask'" id="event_phase_mask" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-6">
                <label class="control-label" for="event_chance">chance</label>
                <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SMARTAI.EDITOR.CHANCE' | translate"></i>
              </div>
              <div class="form-group col">
                <input [formControlName]="'event_chance'" id="event_chance" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-6">
                <label class="control-label" for="event_flags">flags</label>
                <keira-flags-selector-btn
                  [control]="editorService.form.controls.event_flags"
                  [disabled]="editorService.form.controls.event_flags.disabled"
                  [config]="{ flags: SMART_EVENT_FLAGS, name: 'event_flags' }"
                  [modalClass]="'modal-lg'"
                />
              </div>
              <div class="form-group col">
                <input [formControlName]="'event_flags'" id="event_flags" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 sai-category">
            <p class="sai-category-title">Event</p>
            <p class="sai-category-subtitle" [hidden]="isTimedActionlists">
              {{ SAI_EVENTS[selectedEvent] }}
              <i
                class="fas fa-info-circle ms-1"
                placement="auto"
                [hidden]="!SAI_EVENT_TOOLTIPS[selectedEvent]"
                [tooltip]="SAI_EVENT_TOOLTIPS[selectedEvent]"
              ></i>
            </p>
            <p class="sai-category-subtitle" [hidden]="!isTimedActionlists">TIMED_ACTIONLISTS</p>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param1">
                  @if (!isTimedActionlists) {
                    {{ getName('param1', EVENT_PARAM1_NAMES[selectedEvent]) }}
                    <i
                      class="fas fa-info-circle ms-1"
                      placement="auto"
                      [hidden]="!EVENT_PARAM1_TOOLTIPS[selectedEvent]"
                      [tooltip]="EVENT_PARAM1_TOOLTIPS[selectedEvent]"
                    ></i>
                  }
                  @if (isTimedActionlists) {
                    minTimer
                  }
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'event_param1'" id="event_param1" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param2">
                  @if (!isTimedActionlists) {
                    {{ getName('param2', EVENT_PARAM2_NAMES[selectedEvent]) }}
                    <i
                      class="fas fa-info-circle ms-1"
                      placement="auto"
                      [hidden]="!EVENT_PARAM2_TOOLTIPS[selectedEvent]"
                      [tooltip]="EVENT_PARAM2_TOOLTIPS[selectedEvent]"
                    ></i>
                  }
                  @if (isTimedActionlists) {
                    maxTimer
                  }
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'event_param2'" id="event_param2" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row" [hidden]="isTimedActionlists">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param3">
                  {{ getName('param3', EVENT_PARAM3_NAMES[selectedEvent]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!EVENT_PARAM3_TOOLTIPS[selectedEvent]"
                    [tooltip]="EVENT_PARAM3_TOOLTIPS[selectedEvent]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'event_param3'" id="event_param3" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row" [hidden]="isTimedActionlists">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param4">
                  {{ getName('param4', EVENT_PARAM4_NAMES[selectedEvent]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!EVENT_PARAM4_TOOLTIPS[selectedEvent]"
                    [tooltip]="EVENT_PARAM4_TOOLTIPS[selectedEvent]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5" [hidden]="isTimedActionlists">
                <input [formControlName]="'event_param4'" id="event_param4" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row" [hidden]="isTimedActionlists">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param5">
                  {{ getName('param5', EVENT_PARAM5_NAMES[selectedEvent]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!EVENT_PARAM5_TOOLTIPS[selectedEvent]"
                    [tooltip]="EVENT_PARAM5_TOOLTIPS[selectedEvent]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'event_param5'" id="event_param5" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row" [hidden]="isTimedActionlists">
              <div class="form-group col-7">
                <label class="control-label" id="label-event-param6">
                  {{ getName('param6', EVENT_PARAM6_NAMES[selectedEvent]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!EVENT_PARAM6_TOOLTIPS[selectedEvent]"
                    [tooltip]="EVENT_PARAM6_TOOLTIPS[selectedEvent]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'event_param6'" id="event_param6" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 sai-category">
            <p class="sai-category-title">Action</p>
            <p class="sai-category-subtitle">
              {{ SAI_ACTIONS[selectedAction] }}
              <i
                class="fas fa-info-circle ms-1"
                placement="auto"
                [hidden]="!SAI_ACTION_TOOLTIPS[selectedAction]"
                [tooltip]="SAI_ACTION_TOOLTIPS[selectedAction]"
              ></i>
            </p>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param1">
                  {{ getName('param1', ACTION_PARAM1_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM1_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM1_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param1'" id="action_param1" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param2">
                  {{ getName('param2', ACTION_PARAM2_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM2_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM2_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param2'" id="action_param2" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param3">
                  {{ getName('param3', ACTION_PARAM3_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM3_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM3_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param3'" id="action_param3" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param4">
                  {{ getName('param4', ACTION_PARAM4_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM4_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM4_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param4'" id="action_param4" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param5">
                  {{ getName('param5', ACTION_PARAM5_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM5_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM5_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param5'" id="action_param5" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-action-param6">
                  {{ getName('param6', ACTION_PARAM6_NAMES[selectedAction]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!ACTION_PARAM6_TOOLTIPS[selectedAction]"
                    [tooltip]="ACTION_PARAM6_TOOLTIPS[selectedAction]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'action_param6'" id="action_param6" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
          <div class="col-sm-6 col-lg-3 sai-category">
            <p class="sai-category-title">Target</p>
            <p class="sai-category-subtitle">
              {{ SAI_TARGETS[selectedTarget] }}
              <i
                class="fas fa-info-circle ms-1"
                placement="auto"
                [hidden]="!SAI_TARGET_TOOLTIPS[selectedTarget]"
                [tooltip]="SAI_TARGET_TOOLTIPS[selectedTarget]"
              ></i>
            </p>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-target-param1">
                  {{ getName('param1', TARGET_PARAM1_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_PARAM1_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_PARAM1_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'target_param1'" id="target_param1" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-target-param2">
                  {{ getName('param2', TARGET_PARAM2_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_PARAM2_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_PARAM2_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'target_param2'" id="target_param2" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-target-param3">
                  {{ getName('param3', TARGET_PARAM3_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_PARAM3_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_PARAM3_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'target_param3'" id="target_param3" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-7">
                <label class="control-label" id="label-target-param4">
                  {{ getName('param4', TARGET_PARAM4_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_PARAM4_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_PARAM4_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-5">
                <input [formControlName]="'target_param4'" id="target_param4" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-5">
                <label class="control-label" id="label-target-x">
                  {{ getName('TargetX', TARGET_X_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_X_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_X_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-7">
                <input [formControlName]="'target_x'" id="target_x" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-5">
                <label class="control-label" id="label-target-y">
                  {{ getName('TargetY', TARGET_Y_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_Y_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_Y_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-7">
                <input [formControlName]="'target_y'" id="target_y" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-5">
                <label class="control-label" id="label-target-z">
                  {{ getName('TargetZ', TARGET_Z_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_Z_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_Z_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-7">
                <input [formControlName]="'target_z'" id="target_z" type="number" class="form-control form-control-sm" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group col-5">
                <label class="control-label" id="label-target-o">
                  {{ getName('TargetO', TARGET_O_NAMES[selectedTarget]) }}
                  <i
                    class="fas fa-info-circle ms-1"
                    placement="auto"
                    [hidden]="!TARGET_O_TOOLTIPS[selectedTarget]"
                    [tooltip]="TARGET_O_TOOLTIPS[selectedTarget]"
                  ></i>
                </label>
              </div>
              <div class="form-group col-7">
                <input [formControlName]="'target_o'" id="target_o" type="number" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
          <div class="col-12 sai-category comment">
            <div class="form-row">
              <div class="form-group col-4 col-sm-3 col-md-2 col-lg-1">
                <label class="control-label" for="comment">Comment</label>
              </div>
              <div class="form-group col">
                <input [formControlName]="'comment'" id="comment" class="form-control form-control-sm" />
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 form-error" [hidden]="editorService.isFormIdUnique()">
          <i class="fas fa-exclamation-triangle"></i>
          <span [innerHTML]="'UNIQUE' | translate: { ENTITY_SECOND_ID_FIELD: editorService.entitySecondIdField }"></span>
        </div>
      </form>
      <div id="errors">
        @for (err of editorService.errors; track err) {
          <div class="alert alert-dismissible alert-danger">
            {{ err }}
          </div>
        }
      </div>
      <div class="row">
        <div class="col-12">
          <keira-editor-buttons [editorService]="editorService" />
          <button id="generate-comments-btn" class="btn btn-primary btn-sm float-end" (click)="editorService.generateComments(true)">
            Generate comments (all)
          </button>
          <button
            id="generate-comments-btn-single"
            class="btn btn-primary btn-sm float-end me-2"
            (click)="editorService.generateComments()"
            [disabled]="editorService.selectedRowId !== 0 && !editorService.selectedRowId"
          >
            {{ 'SMARTAI.EDITOR.GENERATE_COMMENT' | translate }}
          </button>
          <ngx-datatable
            id="editor-table"
            class="bootstrap table table-striped text-center datatable-select"
            [rows]="editorService.newRows"
            [headerHeight]="DTCFG.headerHeight"
            [footerHeight]="DTCFG.footerHeight"
            [columnMode]="DTCFG.columnMode"
            [rowHeight]="DTCFG.rowHeight"
            [selectionType]="DTCFG.selectionType"
            (select)="editorService.onRowSelection($event)"
            (keydown.delete)="editorService.deleteSelectedRow()"
          >
            <ngx-datatable-column [minWidth]="30" [maxWidth]="30" [sortable]="false">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="60" name="id" prop="id"></ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="event" prop="event_type"></ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="action" prop="action_type"></ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="target" prop="target_type"></ngx-datatable-column>
            @if (isTimedActionlists) {
              <ngx-datatable-column [minWidth]="100" [maxWidth]="100" name="minTimer" prop="event_param1"></ngx-datatable-column>
              <ngx-datatable-column [minWidth]="100" [maxWidth]="100" name="maxTimer" prop="event_param2"></ngx-datatable-column>
            } @else {
              <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="link" prop="link"></ngx-datatable-column>
            }
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="phase" prop="event_phase_mask"></ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="chance" prop="event_chance"></ngx-datatable-column>
            <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="flags" prop="event_flags"></ngx-datatable-column>
            <ngx-datatable-column name="comment" prop="comment"></ngx-datatable-column>
          </ngx-datatable>
        </div>
      </div>
    </div>

    @if (showTimedActionlists) {
      <div class="content-block">
        <p class="lead">
          Creature's Timed Actionlists
          <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'SMARTAI.EDITOR.TIMED_ACTIONLISTS' | translate"></i>
        </p>
        <keira-timed-actionlist [creatureId]="entryOrGuid" />
      </div>
    }
  }
</div>
